<!-- 新增区域弹窗 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="typeMap[type]"
    centered
    :destroyOnClose="true"
    :width="500"
    v-model="visible"
    @ok="handleAdd"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="阶段名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入阶段名称" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: undefined,
      },
      rules: {
        name: [{ required: true, message: '请输入阶段名称', trigger: 'blur' }],
      },
      info: {},
      type: 'add',
      index: 0,
      typeMap: {
        add: '新增阶段',
        edit: '修改阶段名称',
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    show(info, type, index) {
      this.info = info
      this.type = type
      this.index = index
      this.form.name = info.name
      this.visible = true
    },
    onChange(checkedValues) {
      this.checkedValues = checkedValues
    },
    handleAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form.name, this.type, this.index)
          this.visible = false
        }
      })
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped>
</style>